import { ViewEncapsulation } from '@angular/compiler/src/core';
import { Component, OnInit, Input, AfterContentInit } from '@angular/core';
import { SafeHtml } from '@angular/platform-browser';
import { STData, STColumn } from '@delon/abc/st';
import { ControlWidget, FormProperty, ArrayLayoutWidget } from '@delon/form';
import { NzButtonType } from 'ng-zorro-antd/button';
import type { NzSafeAny } from 'ng-zorro-antd/core/types';

@Component({
  selector: 'tabset-item',
  templateUrl: './tabset-item.widget.html'
})
export class TabsetItemWidget extends ArrayLayoutWidget implements OnInit {
  static readonly KEY = 'tabsetItem';

  addTitle!: SafeHtml;
  addType!: NzButtonType;
  removeTitle!: string | null;
  arraySpan = 8;

  users: STData[] = [];
  columns: STColumn[] = [];

  get addDisabled(): boolean {
    return (
      this.disabled || (this.schema.maxItems != null && (this.formProperty.properties as FormProperty[]).length >= this.schema.maxItems!)
    );
  }

  get showRemove(): boolean {
    return !this.disabled && !!this.removeTitle;
  }

  ngOnInit(): void {
    const { addTitle, removable, removeTitle } = this.ui;

    this.addTitle = this.dom.bypassSecurityTrustHtml(addTitle || this.l.addText);
    this.removeTitle = removable === false ? null : removeTitle || this.l.removeText;
    let list = this.schema.items ? this.schema.items.properties : {};
    for (const key in list) {
      console.info(key);
      this.columns.push({
        title: list[key].title || '',
        index: key
      });
    }
    debugger;
  }

  private reValid(): void {
    this.formProperty.updateValueAndValidity({ onlySelf: false, emitValueEvent: false, emitValidator: true });
  }

  addItem(): void {
    const property = this.formProperty.add({});
    this.reValid();
    if (this.ui.add) {
      this.ui.add(property);
    }
  }

  removeItem(index: number): void {
    this.formProperty.remove(index);
    this.reValid();
    if (this.ui.remove) {
      this.ui.remove(index);
    }
  }
}
